<template>
  <div>
    <PageHeader :router_list="router_list" :show-logo="false"/>
    <el-container>
      <el-header class="head">
        <div class="avatar-box">
          <span class="el-avatar">
            <img src='../../assets/imags/pdx.jpg' alt="">
          </span>
        </div>
        <div class="user-info">
          <h6>吉非凡</h6>
          <div class="vip-info">
            <el-button>
              开通课堂派VIP
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="账号信息" name="account" class="tabs-account">
            <div v-for="item in accountItems">
              <h3>
                <span class="title">{{ item.title }}</span>
              </h3>

              <ul>
                <li v-for="i in item.list">
                  <label>{{ i.title }}</label>
                  <p>
                    <span class="content" v-if="!i.need">{{ i.operation }}</span>
                    <span v-else>
                      <img :src="image.warning" style="width: 16px; height: 16px;
                      margin-bottom: -2px;margin-right: 8px;font-size: 16px;"/>
                      未完善
                    </span>
                    <span class="action">
                      <span v-for="(pro, index) in i.actions" @click="pro.even">
                        <span v-if="pro.condition">{{ pro.name }}</span>
                      <div class="vertical"
                           v-if="pro.condition && index < i.actions.length - 1 && i.actions[index + 1].condition"/>
                      </span>
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="通知设置" name="info" class="tabs-account">
            <div v-for="item in informItems">
              <h3>
                <span class="title">{{ item.title }}</span>
              </h3>
              <ul>
                <li v-for="i in item.list">
                  <label>{{ i.title }}</label>
                  <p>
                    <span class="content">{{ i.operation }}</span>
                    <span class="action">
                      <el-switch v-model="i.value" @change="i.even"/>
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import PageHeader from '../../components/PageHeader/index.vue'
import {image} from "../../assets/index.js";
import {ref} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()
const router_list = ref([
  {
    name: '用户设置',
    link: '/main/setting'
  }
])

const activeName = ref('account')

const accountItems = ref([
  {
    title: '账号设置',
    list: [
      {
        title: '账号',
        operation: '114514',
        actions: [],
        need: false
      },
      {
        title: '所属角色',
        operation: '学生占位',
        actions: [
          {
            condition: true,
            name: '去设置',
            even: () => {
            }
          }
        ],
        need: false
      }
    ]
  },
  {
    title: '基础信息',
    list: [
      {
        title: '姓名',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '学号',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '学校',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '院系',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '专业',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '班级',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '年级',
        operation: '',
        actions: [],
        need: true
      },
      {
        title: '入学时间',
        operation: '',
        actions: [],
        need: true
      }
    ]
  },
  {
    title: '第三方账号绑定',
    list: [
      {
        title: '邮箱绑定',
        operation: '',
        actions: [
          {
            condition: false,
            name: '已绑定',
            even: () => {
            }
          },
          {
            condition: true,
            name: '去设置',
            even: () => {
            }
          }
        ],
        need: true
      },
      {
        title: '微信绑定',
        operation: '已绑定',
        actions: [
          {
            condition: true,
            name: '已绑定',
            even: () => {
            }
          },
          {
            condition: false,
            name: '去设置',
            even: () => {
            }
          }
        ],
        need: false
      }
    ]
  }
])

const informItems = ref([
  {
    title: '消息通知',
    list: [
      {
        title: '作业到期',
        operation: '作业到截止日期接收消息推送',
        value: true,
        even: () => {
        }
      },
      {
        title: '课堂私信',
        operation: '学生占位',
        value: true,
        even: () => {
        }
      },
      {
        title: '话题题型',
        operation: '有老师/同学发起话题后接受消息推送',
        value: true,
        even: () => {
        }
      }
    ]
  }
])

</script>

<style scoped>

.el-container {
  font-size: 14px;
  width: 900px;
  margin: 0 auto;

  .el-header {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
    height: fit-content;
    display: flex;

    .avatar-box {
      height: 88px;
      width: 88px;
      line-height: 88px;

      span {
        height: 100%;
        width: 100%;
        clip-path: circle(50% at 50% 50%);
      }
    }

    .user-info {
      padding-left: 16px;
      height: fit-content;
      align-self: center;

      h6 {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 20px;
      }

      .vip-info {
        .el-button {
          color: #4285f4;
          background: 0 0;
          padding-left: 0;
          padding-right: 0;
          outline: none;
          border: none;

          span {
            align-items: center;
            display: inline-flex;
          }
        }
      }
    }
  }

  .el-main {
    padding: 20px 0;
  }

  .tabs-account {
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    padding: 0 24px 24px;

    h3 {
      padding: 24px 0;
    }

    .title {
      font-weight: 400;
      font-size: 16px;
      padding: 24px 0;
      overflow: hidden;
    }

    ul {
      background: #fff;
      border: 1px solid #dadce0;
      border-radius: 4px;
      box-shadow: inset 4px 0 0 0 #4285f4;
    }

    li {
      list-style: none;
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-top: 1px solid #dadce0;
      margin-left: 4px;

      label {
        padding: 0 24px;
        width: 150px;
        text-align: left;
      }

      p {
        flex: 1;
        color: #5f6368;
        padding-right: 24px;
        display: flex;
        justify-content: space-between;

        .action {
          font-size: 14px;
          cursor: pointer;
          color: #4285f4;
        }

        .vertical {
          display: inline-block;
          width: 1px;
          height: 1em;
          margin: 0 8px;
          vertical-align: middle;
          position: relative;
          background-color: #5f6368;
        }
      }
    }
  }

  :deep(.el-tabs__content) {
    background: #f8f9fa;
  }

  :deep(.el-tabs__item) {
    position: relative;
  }

  :deep(.el-tabs__item.is-active) {
    color: #4285f4;
  }

  :deep(.el-tabs__item:hover) {
    color: #4285f4;
  }

}

</style>
